<template>
	<view class="container">
		<view class="income-more-month">
			<text>{{range[0]}}</text>
			<text>{{range[1]}}</text>
		</view>
		<mx-date-picker :show="showPicker" type="range" :value="value" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
		<view class="income-detail">
			<view class="icome-title">收入明细</view>
			<view class="income-lists">
				<view class="icome-items">
					<view>预估总订单</view>
					<view class="active">￥{{search_order.estimate_money}}</view>
				</view>
				<view class="icome-items">
					<view>预估自购订单</view>
					<view>￥{{search_order.estimate_order_money}}</view>
				</view>
				<view class="icome-items">
					<view>预估团队订单</view>
					<view>￥{{search_order.estimate_team_money}}</view>
				</view>
				<view class="icome-items">
					<view>订单总数</view>
					<view class="active">{{search_order.order_count}}</view>
				</view>
				<view class="icome-items">
					<view>自购订单总数</view>
					<view>{{search_order.self_order_count}}</view>
				</view>
				<view class="icome-items">
					<view>团队订单总数</view>
					<view>{{search_order.team_order_count}}</view>
				</view>
				<view class="icome-items">
					<view>结算总额</view>
					<view class="active">{{search_order.settlement_money}}</view>
				</view>
				<view class="icome-items">
					<view>自购结算总额</view>
					<view>{{search_order.settlement_order_money}}</view>
				</view>
				<view class="icome-items">
					<view>团队结算总额</view>
					<view>{{search_order.settlement_team_money}}</view>
				</view>
				<view class="icome-items">
					<view>确认收货</view>
					<view>{{search_order.this_month}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import tools from "../../common/tools"
	import apiorder from '../../common/api/order';
	export default {
		data() {
			return {
                showPicker: false,
                range: [],
                value: '',
				
				params:{
					search_time:[],
				},
				
				search_order:{},
			}
		},
		onShow(){
			tools.is_has_login('hasLogin')
		},
		onLoad() {
			this.get_month()
			this.myincome_search()
		},
		components:{
			apiorder,
			MxDatePicker,
		},
		methods: {
			
		//获取本月的到今天的日期
		get_month(){
			let current_month_day = tools.dateFormat(new Date().setDate(1),'Y/m/d')
			let current_time = tools.dateFormat(new Date(),"Y/m/d")
			this.range=[current_month_day,current_time]
			this.params.search_time=this.range
		},
		
		
		//订单查询列表
		myincome_search(){
			apiorder.myincome_search(this.params).then(res =>{
				if(res.code == 1){
					this.search_order=res.data
				}
			}).catch(cateres =>{
				
			});
		},
		
			
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
                this.type = 'range'
                this.showPicker = true
                this.value = this.range
			}
		},
		// #endif 
		onSelected(e) {//选择
			this.showPicker = false
			if(e) {
				this.range = e.value
				this.params.search_time=this.range
				console.log(this.range)
				this.myincome_search()
			}
		}
		
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color:#F5F5F5;
	}
	.container{
		width:96%;
		padding:2%;
	}
	.income-more-month{
		padding:10upx 0;
		text-align: center;
		text{
			font-weight:bold;
			padding-right:20upx;
			font-size:30upx;
		}
	}
	.income-detail{
		background-color: #FFFFFF;
		padding:2%;
		border-radius:10upx;
		.icome-title{
			font-size:32upx;
			font-weight: bold;
		}
		.income-lists{
			.icome-items{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding:5upx 0;
				view:first-child{
					width:50%;
					font-size:30upx;
				}
				view:last-child{
					width:45%;
					font-size:30upx;
					text-align: right;
					padding-right:5%;
				}
				.active{
					font-size:35upx;
					color:#FF0000;
					font-weight:bold;
				}
			}
		}
	}
</style>
